<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  <title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./lib/swiper-bundle.min.css" />
<link rel="stylesheet" href="./css/index.css" />
<script src="./lib/flexible.js"></script>
<script src="./lib/swiper-bundle.min.js"></script>

<body>
  <div>
    <div class="top">
      <div class="header">
        <!-- 搜索框 -->
        <div class="search">
          <img src=" ./images/首页/Search Glyph@3x.png" alt="" />
          <input type="text" placeholder="超级品牌日直降送豪礼" />
        </div>
        <!-- 消息 右 -->
        <div class="news">
          <img src="./images/首页/message@3x.png" alt="" />

          <span>消息</span>
        </div>
      </div>
      <!-- 导航栏 -->
      <div class="nav">
        <li>
          <span>首页</span>
          <span>手机</span>
          <span>家用电器</span>
          <span>酒水 </span>
          <span>厨卫</span>
          <span>服饰 </span>
          <span>手机</span>
          <span>家用电器</span>
          <span>酒水 </span>
          <span>厨卫</span>
          <span>服饰 </span>
          <span>手机</span>
          <span>家用电器</span>
          <span>酒水 </span>
          <span>厨卫</span>
          <span>服饰 </span>
          <span>手机</span>
          <span>家用电器</span>
          <span>酒水 </span>
          <span>厨卫</span>
          <span>服饰 </span>
        </li>
      </div>
      <!-- 轮播 -->
      <div class="banner">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="./images/首页/19221629422012_.pic_hd@2x.png" alt="" />
            </div>
          </div>
          <!-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>

    <div class="box">
      <!-- 百货服饰 -->
      <div class="navber">
        <ul>
          <li>
            <img src="./images/首页/1.png" alt="" /><span>百货服饰</span>
          </li>
          <li>
            <img src="./images/首页/2.png" alt="" /><span>喜乐超市</span>
          </li>
          <li>
            <img src="./images/首页/3.png" alt="" /><span>喜乐拼购</span>
          </li>
          <li>
            <img src="./images/首页/4.png" alt="" /><span>喜乐家电</span>
          </li>
          <li>
            <img src="./images/首页/5.png" alt="" /><span>美食推荐</span>
          </li>
        </ul>
        <ul>
          <li>
            <img src="./images/首页/6.png" alt="" /><span>免费水果</span>
          </li>
          <li>
            <img src="./images/首页/7.png" alt="" /><span>喜乐会员</span>
          </li>
          <li>
            <img src="./images/首页/8.png" alt="" /><span>现金签到</span>
          </li>
          <li><img src="./images/首页/9.png" alt="" /><span>抢神券</span></li>
          <li>
            <img src="./images/首页/10.png" alt="" /><span>生活家电</span>
          </li>
        </ul>
      </div>
      <!-- 新人专享  -->
      <div class="Exclusive">
        <div>
          <div class="E_left">
            <div>
              <span>新人专享 首单包邮</span> <i>RAY面膜低至49元/盒</i>
            </div>
          </div>
          <div class="E_right">
            <div>
              <span>美妆新人</span><i>艾敬气垫仅145</i><em>立即抢购></em>
            </div>
            <div>
              <span>母婴新人</span><i>爆款好货低至9.9</i><em>立即抢购></em>
            </div>
          </div>
        </div>
      </div>

      <!-- 限时秒杀 -->
      <div class="spike">
        <div class="spike_left">
          <span>限时秒杀</span>
          <i>人气好货限时抢</i>
        </div>
        <div class="spike_right">
          <img src="./images/首页/27.png" alt="" />
          <span>14</span><i>:</i><span>26</span><i>:</i>
          <span>26</span>
        </div>
      </div>
      <!-- 限时秒杀  图片-->
      <div class="spike_img">
        <ul>
          <li>
            <img src="./images/首页/23@2x.png" alt="" /><span>￥12.9</span>
          </li>
          <li>
            <img src="./images/首页/24@2x.png" alt="" /><span>￥12.9</span>
          </li>
          <li>
            <img src="./images/首页/25@2x.png" alt="" /><span>￥12.9</span>
          </li>
          <li>
            <img src="./images/首页/26@2x.png" alt="" /><span>￥12.9</span>
          </li>
        </ul>
      </div>
      <!--  首页大图lunch -->
      <div class="lunch">
        <img src="./images/首页/38@2x.png" alt="" />
      </div>
      <div class="lunch_2">
        <div>
          <div>
            <span>周四工作餐</span><i><span>大牌5折起</span></i>
          </div>
          <div>
            <span>一城一味</span><i><span>大牌5折起</span></i>
          </div>
        </div>
      </div>
      <!-- 榜单 -->
      <div class="list">
        <ul>
          <li>
            <span>榜单</span><span>人气爆品</span><img src="./images/首页/33@2x.png" alt="" />
          </li>
          <li>
            <span>榜单</span><span>人气爆品</span><img src="./images/首页/31@2x.png" alt="" />
          </li>
          <li>
            <span>榜单</span><span>人气爆品</span><img src="./images/首页/35@2x.png" alt="" />
          </li>
          <li>
            <span>榜单</span><span>人气爆品</span><img src="./images/首页/31@2x.png" alt="" />
          </li>
        </ul>
      </div>
      <!-- 两栏布局 -->
      <div class="column">
        <div class="left">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12promax</i></span>
              <div>
                <em class="e1">￥5499</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <em>自营</em>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12pro</i></span>
              <div>
                <em class="e1">￥1.9</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="left">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12promax</i></span>
              <div>
                <em class="e1">￥5499</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <em>自营</em>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12pro</i></span>
              <div>
                <em class="e1">￥1.9</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="left">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12promax</i></span>
              <div>
                <em class="e1">￥5499</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <em>自营</em>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12pro</i></span>
              <div>
                <em class="e1">￥1.9</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="left">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12promax</i></span>
              <div>
                <em class="e1">￥5499</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <em>自营</em>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12pro</i></span>
              <div>
                <em class="e1">￥1.9</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="left">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12promax</i></span>
              <div>
                <em class="e1">￥5499</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <em>自营</em>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12pro</i></span>
              <div>
                <em class="e1">￥1.9</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="left">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12promax</i></span>
              <div>
                <em class="e1">￥5499</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <img src="./images/首页/15@2x.png" alt="" />

            <div>
              <em>自营</em>
              <span>Apple/苹果 iPhone 12 <i>12mini正品12pro</i></span>
              <div>
                <em class="e1">￥1.9</em><em class="e2">5810+评价</em>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部home键 -->
    <div class="Home">
      <div>
        <a href="javascript:;"><img src="./images/购物车/classify-1@3x.png" alt="" /></a><span>首页</span>
      </div>
      <div>
        <a href="./Subpage/Classification.html"><img src="./images/购物车/home-1@3x.png" alt="" /></a><span>分类</span>
      </div>
      <div>
        <a href="./Subpage/shopping.html"><img src="./images/购物车/shop-2@3x.png" alt="" /></a><span>购物车</span>
      </div>
      <div>
        <a href="./Subpage/wd.html"><img src="./images/购物车/mine-1@3x.png" alt="" /></a><span>我的</span>
      </div>
    </div>
  </div>
  <script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        // el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>
</body>

</html>